<template>
  <div class="go-game">
    <div class="board">
      <div v-for="(row, rowIndex) in board" :key="rowIndex" class="row">
        <div v-for="(cell, colIndex) in row" :key="colIndex" class="cell" @click="placeStone(rowIndex, colIndex)">
          <div v-if="cell === 'black'" class="stone black"></div>
          <div v-if="cell === 'white'" class="stone white"></div>
        </div>
      </div>
    </div>
    <div class="status">
      <p>当前玩家：{{ currentPlayer === 'black' ? '黑方' : '白方' }}</p>
      <p v-if="winner">获胜方：{{ winner === 'black' ? '黑方' : '白方' }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoGame',
  data() {
    return {
      board: Array(19).fill().map(() => Array(19).fill(null)),
      currentPlayer: 'black',
      winner: null
    };
  },
  methods: {
    placeStone(row, col) {
      if (this.board[row][col] || this.winner) {
        return;
      }
      this.board[row][col] = this.currentPlayer;
      this.checkWinner(row, col);
      this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
    },
    getGroup(row, col, color, visited) {
      if (row < 0 || row >= 19 || col < 0 || col >= 19 || visited[row][col] || this.board[row][col] !== color) {
        return [];
      }
      visited[row][col] = true;
      const group = [[row, col]];
      const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
      for (const [dx, dy] of directions) {
        group.push(...this.getGroup(row + dx, col + dy, color, visited),);
      }
      return group;
    },

    getLiberties(group) {
      let liberties = 0;
      const visited = Array(19).fill().map(() => Array(19).fill(false));
      for (const [row, col] of group) {
        const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
        for (const [dx, dy] of directions) {
          const newRow = row + dx;
          const newCol = col + dy;
          if (newRow >= 0 && newRow < 19 && newCol >= 0 && newCol < 19 && !visited[newRow][newCol] && !this.board[newRow][newCol]) {
            liberties++;
            visited[newRow][newCol] = true;
          }
        }
      }
      return liberties;
    },

    checkWinner(row, col) {
      const color = this.currentPlayer;
      const visited = Array(19).fill().map(() => Array(19).fill(false));
      const group = this.getGroup(row, col, color, visited);
      const liberties = this.getLiberties(group);
      if (liberties === 0) {
        for (const [r, c] of group) {
          this.board[r][c] = null;
        }
      }

      let blackAlive = false;
      let whiteAlive = false;
      for (let i = 0; i < 19; i++) {
        for (let j = 0; j < 19; j++) {
          if (this.board[i][j] === 'black' && !visited[i][j]) {
            const group = this.getGroup(i, j, 'black', visited);
            if (this.getLiberties(group) > 0) {
              blackAlive = true;
            }
          } else if (this.board[i][j] === 'white' && !visited[i][j]) {
            const group = this.getGroup(i, j, 'white', visited);
            if (this.getLiberties(group) > 0) {
              whiteAlive = true;
            }
          }
        }
      }

      if (!blackAlive) {
        this.winner = 'white';
      } else if (!whiteAlive) {
        this.winner = 'black';
      }
    }
  }
};
</script>

<style scoped>
.go-game {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
}

.row {
  display: flex;
}

.cell {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.stone {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.black {
  background-color: #000;
}

.white {
  background-color: #fff;
  border: 1px solid #000;
}

.status {
  margin-top: 20px;
}
</style>